{{ define "map_gl" }}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>{{.ID}} Preview</title>
        <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
        />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
        <link
            href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
            rel="stylesheet"
        />
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <script>
            var basemapSource = {
                type: "raster",
                tiles: [
                    "//server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}"
                ],
                tileSize: 256,
                attribution:
                    "Tiles &copy; Esri &mdash; Source: USGS, Esri, TANA, DeLorme, and NPS"
            };
            var basemapStyle = {
                id: "basemap",
                type: "raster",
                source: "basemap",
                minzoom: 0,
                maxzoom: 22
            };

            var map;
            // Load raw JSON directly from template
            var tileJSON = {{.TileJSON}};

            var layers = [];
            tileJSON.vector_layers.forEach(function(srcLyr, i) {
                layers.push({
                    id: "overlay-poly-" + i,
                    source: "overlay",
                    "source-layer": srcLyr.id,
                    filter: ["==", "$type", "Polygon"],
                    type: "fill",
                    paint: {
                        "fill-color": "orange",
                        "fill-opacity": 0.5,
                        "fill-outline-color": "red"
                    }
                });

                layers.push({
                    id: "overlay-line-" + i,
                    source: "overlay",
                    "source-layer": srcLyr.id,
                    filter: ["==", "$type", "LineString"],
                    type: "line",
                    paint: {
                        "line-color": "red",
                        "line-opacity": 0.75,
                        "line-width": 2
                    }
                });

                layers.push({
                    id: "overlay-point-" + i,
                    source: "overlay",
                    "source-layer": srcLyr.id,
                    filter: ["==", "$type", "Point"],
                    type: "circle",
                    paint: {
                        "circle-radius": 6,
                        "circle-color": "#F00",
                        "circle-opacity": 1
                    }
                });
            });

            map = new mapboxgl.Map({
                container: "map",
                style: {
                    version: 8,
                    sources: {
                        basemap: basemapSource,
                        overlay: {
                            type: "vector",
                            tiles: tileJSON.tiles,
                            minzoom: tileJSON.minzoom,
                            maxzoom: tileJSON.maxzoom
                        }
                    },
                    layers: [basemapStyle].concat(layers)
                },
                maxZoom: basemapStyle.maxzoom,
                zoom: tileJSON.bounds ? 0 : tileJSON.center[2],
                center: tileJSON.center.slice(0, 2)
            });

            if (tileJSON.bounds) {
                var bounds = [
                    tileJSON.bounds.slice(0, 2),
                    tileJSON.bounds.slice(2, tileJSON.bounds.length)
                ];
                map.fitBounds(bounds);
            }

            map.addControl(new mapboxgl.NavigationControl());
        </script>
    </body>
</html>
{{ end }}
